<!DOCTYPE html>
<html>
<head>
	<title>角色管理</title>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
		  name="viewport">
	<link rel="stylesheet" href="../../css/bootstrap.min.css">
	<script src="../../js/commonJs.js"></script>
	<script src="../../js/commonCss.js"></script>
</head>
<body>
<div id="jeefastapp" v-cloak>
	<div style="height: 50px">
		<el-breadcrumb separator-class="el-icon-arrow-right" style="margin-top: 20px">
			<el-breadcrumb-item>系统管理</el-breadcrumb-item>
			<el-breadcrumb-item>角色管理</el-breadcrumb-item>
		</el-breadcrumb>
	</div>
	<div v-show="showList">
		<el-form :inline="true" :model="q" class="demo-form-inline">
			<el-form-item label="角色名称">
				<el-input size="mini" v-model="q.roleName" placeholder="请输入角色名称"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="query" size="mini" icon="el-icon-search">搜索</el-button>
			</el-form-item>
		</el-form>
		<div class="cantainer">
			<el-button-group>
				<el-button type="primary" size="mini" icon="el-icon-plus" v-if="hasPermission('sys:role:save')"
						   @click="add">新增
				</el-button>
				<el-button type="danger" size="mini" icon="el-icon-delete" v-if="hasPermission('sys:role:delete')"
						   @click="dels">批量删除
				</el-button>
			</el-button-group>
			<el-table ref="multipleTable" :data="entityList" header-align="center"
					  @selection-change="changeFun" size="mini">
				<el-table-column
						type="selection"
						width="55">
				</el-table-column>
				<el-table-column prop="roleId" label="角色ID">
				</el-table-column>
				<el-table-column prop="roleName" label="角色名称">
				</el-table-column>
				<el-table-column prop="remark" label="备注" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button
								size="mini"
								type="primary"
								@click="update(scope.$index, scope.row)">编辑
						</el-button>
						<el-button
								size="mini"
								type="danger"
								@click="delBy(scope.$index, scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[5, 10, 20, 40]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total">
			</el-pagination>
		</div>
	</div>

	<div v-show="!showList" style="margin-top: 20px;width: 98%;" class="panel panel-default">
		<div class="panel-heading">
			<a class="el-icon-arrow-left" size="mini" style="text-decoration: none;cursor:pointer;"
			   type="primary"
			   @click="reload">返回角色管理
			</a>&nbsp;
			<el-tag>{{title}}</el-tag>
		</div>
		<form class="form-horizontal">
			<div class="form-group">
				<div class="col-sm-2 control-label">角色名称</div>
				<div class="col-sm-10">
					<input type="text" class="form-control" v-model="role.roleName" placeholder="角色名称"/>
				</div>
			</div>
			<!--<div class="form-group">
              <div class="col-sm-2 control-label">所属部门</div>
              <div class="col-sm-10">
                <input type="text" class="form-control" style="cursor:pointer;" v-model="role.deptName" @click="deptTree" readonly="readonly" placeholder="所属部门"/>
              </div>
            </div>-->
			<div class="form-group">
				<div class="col-sm-2 control-label">备注</div>
				<div class="col-sm-10">
					<input type="text" class="form-control" v-model="role.remark" placeholder="备注"/>
				</div>
			</div>
			<div class="form-inline clearfix" style="margin-top:30px;margin-left:26px;">
				<div class="form-group col-md-6">
					<strong class="col-sm-5 control-label">功能权限</strong>
					<div class="col-sm-10">
						<ul id="menuTree" class="ztree"></ul>
					</div>
				</div>
				<!--<div class="form-group col-md-6">
                  <strong class="col-sm-5 control-label">数据权限</strong>
                  <div class="col-sm-10">
                    <ul id="dataTree" class="ztree"></ul>
                  </div>
                </div>-->
			</div>
			<div class="form-group">
				<div class="col-sm-2 control-label"></div>
				<input size="mini" type="button" class="btn btn-primary" @click="saveOrUpdate" value="确定"/>
				&nbsp;&nbsp;<input size="mini" type="button" class="btn btn-warning" @click="reload" value="返回"/>
			</div>
		</form>
	</div>
</div>

<!-- 选择部门 -->
<div id="deptLayer" style="display: none;padding:10px;">
	<ul id="deptTree" class="ztree"></ul>
</div>

<script src="../../js/modules/sys/role.js"></script>
</body>
</html>